<PageHeader as |p|>
  <p.levelLeft>
    <h1 class="title is-3">
      Secrets Engines
    </h1>
  </p.levelLeft>
</PageHeader>

<Toolbar>
  <ToolbarActions>
    <ToolbarLink
      @type="add"
      @params={{array 'vault.cluster.settings.mount-secret-backend'}}
    >
      Enable new engine
    </ToolbarLink>
  </ToolbarActions>
</Toolbar>

{{#each supportedBackends as |backend|}}
  {{#linked-block
    (if (eq backend.engineType "kmip")
      "vault.cluster.secrets.backend.kmip.scopes"
      "vault.cluster.secrets.backend.list-root"
    )
    backend.id
    class="list-item-row"
    data-test-secret-backend-row=backend.id
  }}
    <div class="level is-mobile">
      <div class="level-left">
        <div>
          <ToolTip @horizontalPosition="left" as |T|>
            <T.trigger>
              <Icon
                @glyph={{or (if (eq backend.engineType "kmip") "secrets" backend.engineType) "secrets"}}
                @size="l"
                class="has-text-grey-light"
              />
            </T.trigger>
            <T.content @class="tool-tip">
              <div class="box">
                {{backend.engineType}}
              </div>
            </T.content>
          </ToolTip>
          {{#link-to
            (if (eq backend.engineType "kmip")
              "vault.cluster.secrets.backend.kmip.scopes"
              "vault.cluster.secrets.backend.list-root"
            )
             backend.id
             class="has-text-black has-text-weight-semibold"
             data-test-secret-path=true
           }}
            {{backend.path}}
          {{/link-to}}
          <br />
          <code class="has-text-grey is-size-8">
          {{#if (eq backend.options.version 2)}}
            v2
          {{/if}}
          </code>
          <code class="has-text-grey is-size-8">
            {{backend.accessor}}
          </code>
        </div>
      </div>
      <div class="level-right is-flex is-paddingless is-marginless">
        <div class="level-item">
          {{#popup-menu name="engine-menu"}}
            <Confirm as |c|>
             <nav class="menu">
               <ul class="menu-list">
                 <li class="action">
                   {{#link-to "vault.cluster.secrets.backend.configuration" backend.id}}
                     View configuration
                   {{/link-to}}
                  </li>
                  {{#unless (eq backend.type "cubbyhole")}}
                  <li class="action">
                    <c.Message
                      @id={{backend.id}}
                      @triggerText="Disable"
                      @message="Any data in this engine will be permanently deleted."
                      @title="Disable engine?"
                      @confirmButtonText="Disable"
                      @onConfirm={{perform disableEngine backend}}
                      data-test-engine-disable="true"
                      />
                   </li>
                   {{/unless}}
                 {{#if item.updatePath.isPending}}
                   <li class="action">
                     <button disabled type="button" class="link button is-loading is-transparent">
                        loading
                      </button>
                    </li>
                 {{/if}}
                </ul>
              </nav>
            </Confirm>
          {{/popup-menu}}
        </div>
      </div>
    </div>
  {{/linked-block}}
{{/each}}
{{#each unsupportedBackends as |backend|}}
  <div class="list-item-row" data-test-secret-backend-row={{backend.id}}>
    <div class="level is-mobile">
      <div class="level-left">
        <div>
          <div data-test-secret-path class="has-text-weight-semibold has-text-grey">
            <ToolTip @horizontalPosition="left" as |T|>
              <T.trigger>
                <Icon
                  @glyph={{or backend.engineType "secrets"}}
                  class="has-text-grey-light"
                />
              </T.trigger>
              <T.content @class="tool-tip">
                <div class="box">
                  {{backend.engineType}}
                </div>
              </T.content>
            </ToolTip>
            {{backend.path}}
          </div>
          <code class="has-text-grey is-size-8">
            {{backend.accessor}}
          </code>
        </div>
      </div>
      <div class="level-right is-flex is-paddingless is-marginless">
        <div class="level-item">
          <PopupMenu name="engine-menu">
            <Confirm as |c|>
              <nav class="menu">
                <ul class="menu-list">
                  <li class="action">
                    {{#link-to "vault.cluster.secrets.backend.configuration" backend.id data-test-engine-config}}
                      View configuration
                    {{/link-to}}
                  </li>
                  <li>
                    <c.Message
                      @id={{backend.id}}
                      @triggerText="Disable"
                      @message="Any data in this engine will be permanently deleted."
                      @title="Disable engine?"
                      @confirmButtonText="Disable"
                      @onConfirm={{perform disableEngine backend}}
                      data-test-engine-disable="true"
                      />
                  </li>
                </ul>
              </nav>
            </Confirm>
          </PopupMenu>
        </div>
      </div>
    </div>
  </div>
{{/each}}
